<template>
  <div>
    <h2>按钮权限</h2>
    <el-divider content-position="left"> 使用 Hooks 方式绑定权限 </el-divider>
    <el-row class="mb20">
      <el-button v-if="BUTTONS.add" type="primary"> 新增 </el-button>
      <el-button v-if="BUTTONS.edit" type="warning"> 编辑 </el-button>
      <el-button v-if="BUTTONS.delete" type="danger" plain> 删除 </el-button>
      <el-button v-if="BUTTONS.import" type="info" plain> 导入数据 </el-button>
      <el-button v-if="BUTTONS.export" type="info" plain> 导出数据 </el-button>
    </el-row>
    <el-divider content-position="left">
      使用 v-auth 指令绑定单个权限
    </el-divider>
    <el-row class="mb20">
      <el-button v-auth="'add'" type="primary"> 新增 </el-button>
      <el-button v-auth="'edit'" type="warning"> 编辑 </el-button>
      <el-button v-auth="'delete'" type="danger" plain> 删除 </el-button>
      <el-button v-auth="'import'" type="info" plain> 导入数据 </el-button>
      <el-button v-auth="'export'" type="info" plain> 导出数据 </el-button>
    </el-row>
    <el-divider content-position="left">
      使用 v-auth 指令绑定多个权限
    </el-divider>
    <el-row>
      <el-button
        v-auth="['add', 'edit', 'delete', 'import', 'export']"
        type="primary"
      >
        新增
      </el-button>
      <el-button
        v-auth="['add', 'edit', 'delete', 'import', 'export']"
        type="warning"
      >
        编辑
      </el-button>
      <el-button
        v-auth="['add', 'edit', 'delete', 'import', 'export']"
        type="danger"
        plain
      >
        删除
      </el-button>
      <el-button
        v-auth="['add', 'edit', 'delete', 'import', 'export']"
        type="info"
        plain
      >
        导入数据
      </el-button>
      <el-button
        v-auth="['add', 'edit', 'delete', 'import', 'export']"
        type="info"
        plain
      >
        导出数据
      </el-button>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { useAuthButtons } from '@/hooks/useAuthButtons';
const { BUTTONS } = useAuthButtons();

</script>

<style scoped lang="less">
h2 {
  text-align: center;
}
</style>
